<template>
    <div class="liveVideo" :style="{height:boxHeight+'px',width:boxWidth+'px'}">
        <div :class="{videoBox:isFull}">
            <video
                    autoplay
                    ref="videoEle"
                    id="videoElement"
                    @click="showControl"
                    :poster="imgH+img"
                    :class="{bgb:isPlay,videoCamera:!camera}"
                    :style="{width:width+'px',height:height+'px'}"></video>
        </div>
        <div class="control" v-show="flag" @click="showControl" :style="{height:boxHeight+'px',width:boxWidth+'px'}">
            <div class="top">
                <div class="title">
                    <i class="iconfont iconfanhui1x" @click="back"></i>
                    {{title}}
                </div>
                <i class="iconfont iconfenxiang1x" @click="toshare"></i>
            </div>
            <div class="center" @click="liveSwitch">
<!--                <i class="iconfont " :class="[liveFlag?'iconbofang1x':'iconzanting1x',{fs80:isFull}]" @click.stop="liveSwitch"></i>-->
                <div class="watchLive">观看直播</div>
            </div>
            <div class="foot">
                <img src="./msg.png" v-show="isFull" @click.stop="showCartList()">
<!--                <i class="iconfont" v-show="!isFull" :class="[isMuted?'iconyinliang_huaban':'iconjinyin']" style="font-size: 20px;margin-right: 5px;padding-left: 15px" @click.stop="tagVoice"></i>-->
<!--                <i class="iconfont" :class="[isFull?'iconhuanyuan1x':'iconquanping1x']" @click.stop="fullScreen"></i>-->
            </div>
        </div>
        <div class="cart" v-show="showCart" v-if="goods">
            <div class="top">
                <div class="shop">
                    <div class="img">
                        <img v-if="shop" :src="imgH+shop.avatar">
                        <img v-else src="./sjyx.png">
                    </div>
                    <div class="info">
                        <div class="name">{{shop?shop.name:'社集优选自营店'}}</div>
                        <div class="desc">{{shop?shop.slogan:''}}</div>
                    </div>
                </div>
                <div class="join" @click="inShop()">进入店铺 <i class="iconfont iconarrow_right"></i></div>
            </div>
            <div class="goodsList">
                <liveCart :show-pel="false" :goods="goods"></liveCart>
            </div>
        </div>
    </div>
</template>

<script>
    import flvjs from 'flv.js'
    import liveCart from "./liveCart";
    export default {
        name: 'liveVideo',
        components:{liveCart},
        data(){
            return{
                flag:false,
                isPlay:false,
                flvPlayer:null,
                voice:true,
                liveFlag:false,
                poster:require('./poster.png'),
                closeControl:null,
                width:null,
                height:null,
                isFull:true,
                isMuted:true,
                boxWidth:null,
                boxHeight:null,
                showCart:false,
                imgH:process.env.VUE_APP_IMG_DOMAIN,
            }
        },
        methods:{
            showControl(){
                if (this.showCart){
                    this.showCart = false
                    return
                }
                this.flag=!this.flag
                if (this.flag&&this.liveFlag){
                    clearTimeout(this.closeControl)
                    this.closeControl = setTimeout(()=>{
                        this.flag = false
                    },2000)
                }
            },
            tagVoice(){
                this.isMuted = !this.isMuted
                this.flvPlayer.muted = !this.flvPlayer.muted
            },
            fullScreen(){
                return
                this.isFull = !this.isFull
                this.$emit('fullScreen',this.isFull)
                if (this.isFull){
                    this.width=document.body.clientHeight
                    this.height=document.body.clientWidth
                    this.boxWidth= document.body.clientWidth
                    this.boxHeight = document.body.clientHeight
                }else {
                    this.width=document.body.clientWidth
                    this.height=211
                    this.boxWidth= document.body.clientWidth
                    this.boxHeight = 211
                }
            },
            liveSwitch(){
                this.flvPlayer.play()
                // this.liveFlag = !this.liveFlag
                // if (this.liveFlag){
                //     this.flvPlayer.pause()
                // }else {
                //     this.flvPlayer.play()
                // }
            },
            showCartList(){
                this.showCart = true
            },
            inShop(){
                let uid = 0
                if (this.shop){
                    uid=this.shop.id
                }
                this.$router.push({
                    path:'/shop/list',
                    query:{uid}
                })
            },
            back(){
                this.$router.push({
                    path:'/home'
                })
            },
            toshare(){
                this.$emit('shareLive',666)
            }
        },
        props: {
            src:String,
            backSrc:String,
            title:{
                type: String,
                default:()=>{
                    return '直播间'
                }
            },
            goods:{
                type:Array,
                default:()=>{}
            },
            shop:{
                type:Object,
                default:()=>{}
            },
            img:String,
            camera:{
                type:Number,
                default:0
            }

        },
        watch:{
            // src(){
            //   this.flvPlayer.pause()
            //   this.flvPlayer.unload()
            //   this.flvPlayer.detachMediaElement()
            //   this.flvPlayer.destroy()
            //   this.flvPlayer = null
            // }
        },
        mounted () {
            let flvSrc = this.src
            if (flvjs.isSupported()) {
                let videoElement = document.getElementById('videoElement')
                let flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive:true,
                    url: flvSrc,
                })
                flvPlayer.attachMediaElement(videoElement)
                flvPlayer.load()
                this.$nextTick(()=>{
                    this.isPlay = true
                    this.flvPlayer = flvPlayer
                    this.flvPlayer.play()
                })
            }
            this.width=document.body.clientHeight
            this.height=document.body.clientWidth
            this.boxWidth= document.body.clientWidth
            this.boxHeight = document.body.clientHeight
        },

    }
</script>

<style scoped>
    .liveVideo{
        width: 100%;
        height: 100%;
        background-color: #000000;
    }
    .videoBox{
        transform:rotate(90deg);
    }
    .videoCamera{
        transform:rotate(180deg);
    }

    #videoElement{
        /*height: 375px;*/
        /*width: 667px;*/

        background-repeat: no-repeat;
        background-size: 100%;
        object-fit:fill

    }
    .bgb{
        background-image: none !important;
        background: #000 !important;
    }
    .control{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        color: #FFFFFF;
        font-size: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .top{
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .center{
        text-align: center;
        font-size: 24px;
    }
    .fs80{
        font-size: 80px;
    }

    .foot{
        padding: 15px;
        padding-left: 0;
        display: flex;
        align-items: center;
    }
    .foot img{
        width: 50px;
        height: 45px;
    }
    .cart{
        border-radius: 8px 8px 0 0;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: calc(100% - 40px);
        padding:8px 20px;

    }
    .cart .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }
    .cart .top .shop{
        display: flex;
        align-items: center;
    }
    .cart .top .shop .img{
        height: 32px;
        width: 32px;
    }
    .top .shop .img img{
        width: 32px;
        height: 32px;
    }
    .shop .info{
        margin-left: 5px;
    }
    .top .shop .name{
        font-size: 12px;
        color: #303333;
        line-height: 17px;
    }
    .shop .info .desc{
        font-size: 10px;
        color: #909999;
        line-height: 14px;
    }
    .cart .join{
        font-size: 14px;
        line-height: 20px;
        color: #CCCCCC;
    }
    .liveCart /deep/.right{
        padding: 0  10px;
    }
    .liveCart /deep/.item{
        height: 88px;
    }
    .liveCart /deep/.mainImg img{
        width: 88px;
        height: 88px;
    }
    .liveCart /deep/.mainImg{
        width: 88px;
        height: 88px;
    }
    .liveCart /deep/.toCart{
        font-size: 25px;
    }
    .watchLive{
        padding: 5px 10px;
        display: inline;
        border-radius: 20px;
        background-color: #ff7500;
        font-size: 20px;
        color: #fff
    }

</style>